<template>
  <div class="chat-list" @dragover="handleDragOver" ref="listContainer">
    <template v-for="item in mockList">
      <div
        :class="['chat-list-item', currentItemId === item.id ? 'chat-item-selected' : '']"
        @click="clickItem(item)"
        @contextmenu.prevent="handleShowContextMenu($event, item)"
        draggable="true"
        @dragstart="handleDragStart($event, item)"
        @dragend="handleDragEnd"
      >
        <!--    头像  -->
        <div class="chat-list-item-avatar">
          <n-badge :value="item.noReadCount" :max="99" v-if="item.noReadCount > 0">
            <img :src="item.avatar" width="38" alt="头像">
          </n-badge>
          <img :src="item.avatar" width="38" v-else alt="头像">
        </div>

        <!--    右侧缩略显示信息  -->
        <div class="chat-list-item-detail">
          <div class="dis-flex sbw alc">
            <div class="chat-list-item-name">{{ item.name }}</div>
            <div class="time-info">14:26</div>
          </div>
          <div class="short-info show-one-line">
            <span style="margin-right: 2px;color: red;" v-if="item.status === 1">[{{ item.statusText }}]</span>
            {{ item.shortInfo }}
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref } from "vue";
const emits = defineEmits(['clickItem'])

import { mockList } from "@/views/chat/chatList/mockList.js";

import { showContextMenu } from "@/utils/eventBus/contextMenu.js";

const currentItemId = ref(); // 当前选中的item
const clickItem = (item) => {
  currentItemId.value = item.id;
  emits('clickItem', item)
}

// 显示右键菜单
const handleShowContextMenu = (event, item) => {
  showContextMenu(event, item)
};

/** -----------   以下处理拖拽出单独聊天窗口，todo:体验优化，目前只是能用、但是体验不好  ---------------  */

import { useWindow } from "@/hooks/useWindow.js";

const listContainer = ref(null);
const dragItem = ref(null);
const { createWindow } = useWindow();

const handleDragStart = (e, item) => {
  dragItem.value = item;
  e.dataTransfer.effectAllowed = 'move';
};

const handleDragOver = (e) => {
  e.preventDefault();
  const container = listContainer.value;
  const rect = container.getBoundingClientRect();

  // 检查是否超出容器范围
  if (e.clientX < rect.left || e.clientX > rect.right ||
    e.clientY < rect.top || e.clientY > rect.bottom) {
    // 超出范围，准备创建新窗口
    e.dataTransfer.dropEffect = 'move';
  }
};

const handleDragEnd = (e) => {
  const container = listContainer.value;
  const rect = container.getBoundingClientRect();

  // 如果拖拽结束时鼠标在容器外，则创建新窗口
  if (e.clientX < rect.left || e.clientX > rect.right ||
    e.clientY < rect.top || e.clientY > rect.bottom) {
    createDetachedWindow(dragItem.value);
  }
  dragItem.value = null;
};

// todo：后话新创建窗口的位置，需要与鼠标位置对应
const createDetachedWindow = (item) => {
  console.log('超出范围了，我要创建新窗口', item)
  createWindow(`chat/singleWindow/${item.id}`, {
    title: item.name,
    url: `chat/singleWindow?userId=${item.id}&userName=${item.name}`,
    width: 900,
    height: 640,
    minWidth: 900,
    minHeight: 640,
    decorations: false,
    center: false
  });
};


</script>

<style lang="scss" scoped>
$txtColor: #999999;
.chat-list-item {
  padding: 10px;
  display: flex;
  flex-direction: row;
  background-color: #f7f7f7;

  &:hover {
    background-color: #D4D4D4;
  }

  .chat-list-item-avatar {
    position: relative;
  }
  .chat-list-item-detail {
    padding-left: 6px;
    width: calc(100% - 36px);
    .chat-list-item-name {
      font-size: 14px;
      font-weight: 500;
    }
  }
  .short-info {
    font-size: 12px;
    color: $txtColor;
    padding-top: 2px;
    //width: calc(100% - 80px);
    width: 100%;
  }
  .time-info {
    color: $txtColor;
    font-size: 12px;
  }
}

.chat-item-selected {
  background-color: #C4C4C4 !important;
}

//:deep(.el-badge__content) {
//  border: 0;
//  padding: 0 4px;
//  height: 14px;
//  line-height: 14px;
//}
</style>
